<template>
	<yd-layout id='liveList' >
		<div class="content">
			<yd-infinitescroll :callback="livingList" ref="infinitescrollDemo">
				<div slot="list" class="list" v-for="item in liveList" @click="goNext(item)">
					<div class="list_header">
						<div class="list_header_top">
							<img class="list_header_top_img" :src="item.avatar" alt="" />
							<span class="c_size_30_42 c_text_ellipsis_1">{{item.nick_name}}</span>
						</div>
						<div v-if="item.status===0" class="list_header_bottom" style="background: #35BF7E;">
							<img class="list_header_bottom_img" src="../../assets/playGif.gif" alt="" />
							<span>直播中</span>
						</div>
						<div v-else-if="item.status===1" class="list_header_bottom" style="background: #FFA900;">
							<span>课程预告</span>
						</div>
						<div v-else class="list_header_bottom" style="background: #CCCCCC;">
							<span>回&nbsp;放</span>
						</div>
					</div>
					<div class="list_title c_text_ellipsis_2 c_size_34_48">{{item.title}}</div>
					<div class="list_bottom ">
						<div class="list_bottom_password" >
							<span v-if="item.status!==1">{{item.member_total}}人观看</span>
							<span class="c_text_ellipsis_1" v-else>直播时间：{{item.time}}</span>
							<div v-if="item.bpass==1&&item.member==1" class="password_paly" style="color: #35BF7E;">会员加密直播</div>
							<div v-else-if='item.member==1' class="password_paly" style="color: #35BF7E;">会员直播</div>
							<div v-else-if="item.bpass==1" class="password_paly" style="color: #35BF7E;">加密直播</div>
						</div>
						
					</div>
				</div>
				<!-- 数据全部加载完毕显示 -->
		        <span  slot="doneTip">没有更多数据了~~</span>
		
		        <!-- 加载中提示，不指定，将显示默认加载中图标 -->
		        <!--<img slot="loadingTip" src="path/img/loading.svg"/>-->
			</yd-infinitescroll>
			
		</div>
		<yd-backtop></yd-backtop>
		<!--路由套壳的感觉差不多-->
		<!--<Footer slot='bottom'  activeStr='index'></Footer>-->
		
		<!--输入密码-->
		<yd-popup v-model="showPop" position="center" :close-on-masker='false'>
			<div class="pop_nike_name">
				<div class="title c_size_34_48">该场直播已加密</div>
				<div class="pop_nike_name_input">
					<input placeholder="请输入六位直播密码" oninput="if(value.length>6)value=value.slice(0,6)"  type="text" v-model="passwordNum" />
				</div> 
				<ul class="c_size_34_48">
					<li @click="showPop=false">取消</li>
					<li @click="postPassword()" >确定</li>
				</ul>
			</div>
        </yd-popup>
	</yd-layout>
	
</template>

<script>
	//import mixinIndex from '../../mixin/mixinIndex.js'
	import Footer from '../../components/Footer/Footer.vue'
	import {InfiniteScroll} from 'vue-ydui/dist/lib.rem/infinitescroll';
	import {BackTop} from 'vue-ydui/dist/lib.rem/backtop';
	import {Popup} from 'vue-ydui/dist/lib.rem/popup';
	export default{
		mixins:[],
		components:{
			[Footer.name]:Footer,
			[InfiniteScroll.name]:InfiniteScroll,
			[BackTop.name]:BackTop,
			[Popup.name]:Popup,
		},
		data(){
			return {
				liveList:[],
				pageNum:1,
				pageCount:10,
				showPop:false,
				teacherList:[],//讲师团队列表
				passwordNum:'',
				listObj:{},
				mineObj:{},
			}
		},
		created() {
			if((!this.$route.query.str)&&this.$root.config.oldUrlStr){
				let urlName = 'index'
				if(this.$root.config.oldUrlStr){
					urlName=this.$root.config.oldUrlStr!='login'?this.$root.config.oldUrlStr:'index'
				}
				let query={}, countNum = 1;
				//对参数进行整理
				if(this.$root.config.keyNum&&this.$root.config.keyNum>=1){
					for(let key in this.$root.config){
						if(key==('paramsVal'+countNum)){
							query[this.$root.config['paramsKey'+countNum]] = this.$root.config['paramsVal'+countNum]
							if(countNum==this.$root.config.keyNum){
								break	
							}
							countNum ++
						}
					}
				}
				this.$router.push({
					name:urlName,
					query:query
				})
			}
			
		},
		watch: {
			
		},
		computed: {
			
		},
		async mounted(){
			document.title='大咖直播'
			var ua = navigator.userAgent;
			if(this.$root.isPc!='pc'&&ua.match(/MicroMessenger/i) != 'MicroMessenger'&&(this.$root.isPcOS=='Phone'||this.$root.isPcOS=='Linux')){
				await this.getToken()
			}
			
			this.getMine()
			this.livingList()
		},
		methods:{
			//输入密码
			postPassword(){
				if(this.passwordNum.length==6){
					if(this.passwordNum==this.listObj.password){
						if(this.listObj.status===0){
							this.$router.push({
								name:'liveRoom',
								query:{
									id:this.listObj.id,
									password:this.listObj.password
								}
							})
						}else{
							this.$router.push({
								name:'live',
								query:{
									id:item.id,
									kind:this.listObj.status,
								}
							})
						}
					}else{
						this.$dialog.toast({
		                    mes: '请输入正确的六位密码',
		                    timeout: 1500
		                });
					}
				}else{
					this.$dialog.toast({
	                    mes: '请根据提示正确输入',
	                    timeout: 1500
	                });
				}
			},
			//获取列表
			livingList(){
				this.$root.ajax({
					name:'live/lst', 
					type:'get',
					params:{
						page:this.pageNum,
						count:this.pageCount,
					}
				}).then((d)=>{
					for(let a = 0 ;a<d.data.live_list.length;a++){
						d.data.live_list[a].time = this.$root.getDate(new Date(d.data.live_list[a].start_time*1000),{allTime:2})
					}
					
					this.liveList = [...this.liveList, ...d.data.live_list];
                    if (this.liveList.length >= d.data.live_total ) {
                        /* 所有数据加载完毕 */
                        this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                        return;
                    }

                    /* 单次请求数据完毕 */
                    this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

                    this.pageNum++;
                    
				})
			},
			//安卓，苹果端登录
			getToken(){
				return new Promise((resolve,reject)=>{
					let params = {};
					if(this.$root.isPc()=='android'){
						params={
							uid:this.$root.config.androidOrIosObj.user_uid,
							nick_name:this.$root.config.androidOrIosObj.user_name,
							avatar:this.$root.config.androidOrIosObj.user_photo,
							client:1,//1安卓，2ios。3web
							item:2,//1、报名通道；2、直销万事通APP
							channel:this.$root.config.channel,
							mobile:'',
						}
					}else{
						params={
							uid:this.$root.config.androidOrIosObj.user_uid,
							nick_name:this.$root.config.androidOrIosObj.user_name,
							avatar:this.$root.config.androidOrIosObj.user_photo,
							client:2,//1安卓，2ios。3web
							item:2,//1、报名通道；2、直销万事通APP
							channel:this.$root.config.channel,
							mobile:'',
						}
					}
					this.$root.ajax({
						name:'Index/loginin',
						params:params
					}).then((d)=>{
						this.$root.userInfo=d.data
						sessionStorage.setItem('wst_lvzy_userInfo',JSON.stringify(d.data));
						resolve()
					})
				})
			},
			//去下一个页面，直播，回放，预播
			goNext(item){
				//清空密码
				this.listObj ={};
				
				if(item.status===0){
					//判断是否需要密码
					//非（视频需要会员，且已经开通会员）
					if(item.member==1){
						if(this.mineObj.member_status!=1){
							//弹出开通会员框
							this.$dialog.confirm({
			                    title: '温馨提示',
			                    mes: '该场直播需要开通会员权限才能观看',
			                    opts: [
			                    	{
			                            txt: '取消',
			                            color: '#999999',
			                            callback: () => {
			                            	
			                      		},
			                    	},
			                        {
			                            txt: '开通会员',
			                            color: '#35BF7E',
			                            callback: () => {
											this.$router.push({
												name:'vipOpen'
											})
			                            }
			                        },
			                    ]
			                });
			                return
						}
					}
					
					//判断是否需要密码
					if(item.bpass==1){
						//弹出密码框
						this.showPop=true;
						this.listObj = Object.assign({},this.listObj,item)
						this.passwordNum=''
						return
					}
					this.$router.push({
						name:'liveRoom',
						query:{
							id:item.id,
						}
					})
				}else{
					this.$router.push({
						name:'live',
						query:{
							id:item.id,
							kind:item.status,
						}
					})
				}
				
			},
			getMine(){
				this.$root.ajax({
					name:'my',
					params:{}
				}).then((d)=>{
					this.mineObj=Object.assign({},this.mineObj,d.data)
				})
			},
		}
	}
</script>

<style lang="scss">
	@import './liveList.scss';
</style>